<template>
	<view class="comp-custom-picker">
		<u-popup :show="show" :round="16" mode="bottom" @close="onCancel">
			<view class="picker-title normal-title-16 flex-between-center">
				<text class="gray-text" @tap="onCancel">取消</text>
				<text class="flex-1 text-center">{{title}}</text>
				<text class="blue-text" @tap="onConfirm">确定</text>
			</view>
			<picker-view :value="value" @change="onChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in computedColumns[0]" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in computedColumns[1]" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in computedColumns[2]" :key="index">{{item}}</view>
				</picker-view-column>
			</picker-view>
		</u-popup>
	</view>


</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
	} from "vue";

	import {
		onLoad
	} from '@dcloudio/uni-app';

	const props = defineProps({
		title: {
			type: String,
			default: '请选择',
		},
		show: {
			type: Boolean,
			default: false,
		},
		columns: {
			type: Array,
			default: [],
		},
	})

	const emit = defineEmits(['update:show', 'confirm', 'cancel', 'change']);
	const one = ref(props.columns[0].value);
	const two = ref(props.columns[0].children[0].value);
	const three = ref(props.columns[0].children[0].children[0].value);

	const value = ref([0, 0, 0]);
	//初始化开始数据
	const computedColumns = computed(() => {
		// console.log(this.origiData.value))
		let sheng = [];
		let shi = [];
		let qu = [];
		props.columns.forEach(item => {
			sheng.push(item.value);
			// 第一列和第二列发生变化后，切换后续的列的数据
			if (item.value == one.value) {
				item.children.forEach(child => {
					shi.push(child.value);

					if (child.value == two.value) {
						child.children.forEach(el => {
							qu.push(el.value);
						});
					}
				});
			}
		});
		return [
			sheng,
			shi,
			qu,
		]
	});

	const onCancel = () => {
		emit('update:show', false);
		emit('cancel')
	};

	const onConfirm = () => {
		emit('update:show', false);
		emit('confirm', {
			value: [
				one.value,
				two.value,
				three.value,
			]
		})
	};

	const onChange = (e) => {
		console.log('onChange', e.detail)
		const arr = e.detail.value;
		value.value = arr;
		one.value = computedColumns.value[0][arr[0]];
		two.value = computedColumns.value[1][arr[1]];
		three.value = computedColumns.value[2][arr[2]]
	};
</script>

<style lang="scss" scoped>
	.comp-custom-picker {
		.picker-title {
			height: 100rpx;
			padding: 0 40rpx;
		}
	}
</style>